<template>
    <view>
        <view class="smart-container">1.容器</view>
        <navigator url="/pages/0928/view/view">
        <view class="smart-panel-h" @click="goDetailPage('view')">
            <text>view视图</text>
        </view>
        </navigator>
        
        
        
        <view hidden="true" class="smart-panel-h" @click="goDetailPage('scroll-view')">
            <text>scroll-view滚动视图</text>
        </view>
        <view hidden="true" class="smart-panel-h" @click="goDetailPage('swiper')">
            <text>swiper可滑动视图</text>
        </view>

        <navigator url="/pages/0928/text/text">
        <view class="smart-container">2.基础内容</view>
        <view class="smart-panel-h" @click="goDetailPage('text')">
            <text>text文本编辑</text>
        </view>
        </navigator>
        
        <view hidden="true" class="smart-panel-h" @click="goDetailPage('rich-text')">
            <text>rich-text富文本编辑</text>
        </view>
        
        
        <view hidden="true" class="smart-panel-h" @click="goDetailPage('progress')">
            <text>progress进度表</text>
        </view>
        
        <navigator url="/pages/0928/icon/icon">
        <view class="smart-panel-h" @click="goDetailPage('icon')">
            <text>icon图标</text>
        </view>
        </navigator>

        <view class="smart-container">3. 表单组件</view>
        
        <navigator url="/pages/0928/button/button">
        <view class="smart-panel-h" @click="goDetailPage('button')">
            <text>button按钮</text>
        </view>
        </navigator>
        
        <navigator url="/pages/0928/checkbox/checkbox">
        <view class="smart-panel-h" @click="goDetailPage('checkbox')">
            <text>checkbox多选框</text>
        </view>
        </navigator>
        
        <navigator url="/pages/0928/label/label">
        <view class="smart-panel-h" @click="goDetailPage('label')">
            <text>label标签组件</text>
        </view>
        </navigator>
        
        <navigator url="/pages/0928/input/input">
        <view class="smart-panel-h" @click="goDetailPage('input')">
            <text>input输入框</text>
        </view>
        </navigator>
    
       <navigator url="/pages/0928/textarea/textarea"> 
        <view  class="smart-panel-h" @click="goDetailPage('textarea')">
            <text>textarea多行文本输入框</text>
        </view>
       </navigator> 
        
        <navigator url="/pages/0928/form/form">
        <view class="smart-panel-h" @click="goDetailPage('form')">
            <text>form表单</text>
        </view>
        </navigator> 
       
       
        <view class="smart-container">4. 导航组件</view>
        <navigator url="/pages/0928/nav-demo/nav-demo">
            <view class="smart-panel-h" @click="goDetailPage('navigator')"><text>navigator</text></view>
        </navigator>



    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            goDetailPage(e) {
                if (typeof e === 'string') {
                    uni.navigateTo({
                        url: '/pages/' + e + '/' + e
                    });
                } else {
                    uni.navigateTo({
                        url: e.url
                    });
                }
            }
        }
    }
</script>

<style>
    /* ========== 统一变量 ========== */
    page {
        --smart-main: #2979ff;
        /* 主色 */
        --smart-main-light: #ecf5ff;
        /* 浅背景 */
        --smart-border: #e5e5e5;
        /* 分割线 */
        --smart-text: #333;
        /* 正文 */
        --smart-text-light: #666;
        /* 辅助文字 */
        --smart-radius: 12rpx;
        /* 圆角 */
        --smart-gap: 20rpx;
        /* 通用间距 */
    }

    /* ========== 页面级 ========== */
    page {
        background-color: #f8f8f8;
        font-size: 32rpx;
        color: var(--smart-text);
        line-height: 1.3;
        padding-bottom: env(safe-area-inset-bottom);
        /* 底部安全区 */
    }

    /* ========== 容器标题 ========== */
    .smart-container {
        margin: var(--smart-gap) var(--smart-gap) 0;
        padding: 0 24rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: var(--smart-main);
        letter-spacing: 2rpx;
    }

    /* ========== 面板 ========== */
    .smart-panel-h {
        position: relative;
        margin: 0 var(--smart-gap);
        margin-top: var(--smart-gap);
        padding: 28rpx 0;
        background: #fff;
        border-radius: var(--smart-radius);
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .smart-panel-h text {
        display: block;
        padding-left: 40rpx;
        color: var(--smart-text);
    }

    /* 隐藏面板彻底不占位 */
    .smart-panel-h[hidden="true"] {
        display: none !important;
    }

    /* 手指按下反馈 */
    .smart-panel-h:active {
        transform: scale(0.97);
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    }

    /* ========== 宽屏适配 ========== */
    @media (min-width: 600rpx) {

        .smart-container,
        .smart-panel-h {
            max-width: 700rpx;
            margin-left: auto !important;
            margin-right: auto !important;
        }
    }
</style>